<template>
	<view class="page">
		<view class="main padding-0">
			<view class="bg-white flex align-center justify-between padding">
				<u-text iconStyle="font-size:36rpx;margin-left:10rpx;" :suffixIcon="role === 'principal' ? 'edit-pen' : ''"
					text="负责老师：张老师" size="28rpx" color="#333"></u-text>
				<u-text iconStyle="font-size:36rpx;margin-left:10rpx;" suffixIcon="edit-pen" align="right" text="任教学科：李老师"
					size="28rpx" color="#333" @click="toAssignTeacherClick"></u-text>
			</view>

			<view class="flex align-center padding-lr padding-tb-sm">
				<view class="flex-1">
					<u-text text="共 13 人" color="#999" size="28rpx"></u-text>
				</view>
				<view>
					<u-button customStyle="color:#0060E6" shape="circle" class="btn-blue" color="#EBF3FF" text="班级课程表"
						@click="toScheduleClick"></u-button>
				</view>
			</view>

			<view class="student-list">
				<view class="student-item">
					<view>
						<u-avatar :src="`https://picsum.photos/200/300?random=14`" size="120rpx"></u-avatar>
						<u-text margin="10rpx 0 0 0" align="center" text="张三" size="28rpx" color="#333"></u-text>
					</view>
					<view class="in-review-bg">
						转班审核中
					</view>
				</view>
				<view class="student-item" @click="toReceiveStudentClick">
					<view>
						<u-avatar :src="`https://picsum.photos/200/300?random=14`" size="120rpx"></u-avatar>
						<u-text margin="10rpx 0 0 0" align="center" text="张三" size="28rpx" color="#333"></u-text>
					</view>
					<view class="in-review-bg">
						待接收学员
					</view>
				</view>
				<view class="student-item" v-for="i in 13">
					<view>
						<u-avatar :src="`https://picsum.photos/200/300?random=${i}`" size="120rpx"></u-avatar>
						<u-text margin="10rpx 0 0 0" align="center" text="张三" size="28rpx" color="#333"></u-text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer gap" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
			<u-button customStyle="color:#333" size="large" shape="circle" color="#EEEEEE" text="添加已有学员"
				@click="toAddStudentClick"></u-button>
			<u-button size="large" shape="circle" type="primary" text="学员转班" @click="toTransferStudentClick"></u-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useTheme } from '@/composables/useTheme';
const { themeTertiary } = useTheme();
const id = ref(0);
const classType = ref(0);
const role = ref('');
onLoad((options) => {
	id.value = options.id;
	classType.value = options.classType;
	role.value = uni.getStorageSync('role');
	uni.setNavigationBarTitle({
		title: classType.value == 1 ? '托管班：一年级（A）班' : '周末班：一年级-数学（A）班'
	});
});

// 班级课程表
const toScheduleClick = () => {
	uni.navigateTo({
		url: `/pages/common/schedule/index?id=${id.value}`
	});
}

// 添加已有学员
const toAddStudentClick = () => {
	uni.navigateTo({
		url: `/pages/common/addStudent/addStudent?id=${id.value}`
	});
}

// 转班
const toTransferStudentClick = () => {
	uni.navigateTo({
		url: `/pages/common/changeClasses/changeClasses?id=${id.value}`
	});
}

// 接收学员
const toReceiveStudentClick = () => {
	uni.navigateTo({
		url: `/pages/common/receiveStudent/receiveStudent?id=${id.value}`
	});
}

// 指派老师
const toAssignTeacherClick = () => {
	uni.navigateTo({
		url: `/pages/common/assignTeacher/assignTeacher?id=${id.value}`
	});
}
</script>

<style scoped lang="scss">
.student-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40rpx;
	padding: 30rpx;
}

.student-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;

	.in-review-bg {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		color: white;
		font-size: 20rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 120rpx;

		&::after {
			content: '';
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 40rpx;
			height: 30rpx;
			border-radius: 50rpx 50rpx 50rpx 0;
			background: #FF5252;
		}
	}
}
</style>
